<template>
	<div :id="id" class="chart"></div>
</template>
<script>
import rangeStr from '@utils/base/rangeStr'
import { debounce } from 'lodash'

import * as echarts from 'echarts/core' // 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import { SVGRenderer } from 'echarts/renderers' // 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { LineChart } from 'echarts/charts' // 引入柱状图图表，图表后缀都为 Chart
import { TooltipComponent, GridComponent } from 'echarts/components' // 引入提示框，标题，直角坐标系组件，组件后缀都为 Component
echarts.use([TooltipComponent, GridComponent, LineChart, SVGRenderer]) // 注册必须的组件
export default {
  name: 'LineChart',
  props: {
    value: Array,
    colors: {
      type: Array,
      default: () => ['#FA7A22', '#FFD200', '#FA7A22', '#49BAF2']
    },
    xAxisName: String,
    yAxisName: String,
    xAxisKey: {
      type: String,
      default: 'name'
    },
    series: {
      type: Array,
      default: () => ['value']
    },
    // 是否平滑显示
    smooth: {
      type: Boolean,
      default: true
    },
    // 是否显示拆线点
    showSymbol: {
      type: Boolean,
      default: true
    },
    areaStyle: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      chart: null,
      id: rangeStr(),
      resize: null
    }
  },
  watch: {
    value(val) {
      this.$nextTick(() => {
        val = this.value
        this.initChart(val)
      })
    },
    // deep: true,
    // immediate: true
  },

  mounted() {
    this.initChart(this.value)
    this.resize = debounce(() => {
      this.chart && this.chart.resize()
    }, 200)
    window.addEventListener('resize', this.resize)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.resize)
  },
  methods: {
    initChart(data) {
      if (!Array.isArray(data)) return
      this.chart && this.chart.dispose()
      this.chart = echarts.init(document.getElementById(this.id))
      const areaStyle = this.areaStyle
        ? {
          opacity: 0.3,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#0072FF' },
            { offset: 1, color: 'rgba(0, 114, 255, 0)' }
          ])
        }
        : null
      this.chart.setOption({
        grid: { left: '70px', right: '30px', top: '10px', bottom: '30px' },
        color: '#0072ff',
        xAxis: {
          axisTick: false,
          name: this.xAxisName,
          nameTextStyle: { color: '#999999' },
          axisLine: { show: true, lineStyle: { color: '#2D5FA9' } },
          axisLabel: { color: '#999999' },
          type: 'category',
          data: data.map(item => item[this.xAxisKey])
        },
        yAxis: {
          type: 'value',
          name: this.yAxisName,
          nameTextStyle: { color: '#999999' },
          axisLine: { show: false, lineStyle: { color: '#E5E5E5' } },
          splitLine: { show: true, lineStyle: { color: '#2D5FA9' } },
          axisLabel: { color: '#999999' }
        },
        series: this.series.map(key => {
          return {
            data: data.map(item => item[key]),
            type: 'line',
            smooth: this.smooth,
            symbol: 'circle',
            symbolSize: 6,
            showSymbol: this.showSymbol,
            areaStyle
          }
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.chart {
	width: 100%;
	height: 100%;
	flex: 1;
}
</style>
